<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游记攻略</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../resources/lib/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../../resources/travel-note/css/travel-note.css">
    <!--<link type="text/css" rel="stylesheet" href="../../resources/index/css/font-awesome.min.css"/>-->
    <link rel="stylesheet" type="text/css" href="../../resources/travel-note/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="../../resources/travel-note/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../resources/travel-note/css/component.css" />
    <link rel="stylesheet" type="text/css" href="../../resources/index/css/style1.css">
    <script style="text/javascript" src="../../resources/lib/jQuery/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../../resources/index/js/index.js"></script>
    <script style="text/javascript" src="../../resources/lib/jQuery/jquery-3.1.1.js"></script>
    <script style="text/javascript" src="../../resources/travel-note/js/travel-note.js"></script>
    <script type="text/javascript" src="../../resources/lib/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script style="text/javascript" src="../../resources/index/js/login-user-id.js"></script>
</head>
<body style="background: #fff6f4;">
<div class="" style="background:#fff6f4;!important;z-index: 100;width:100%;margin-top: 0px;">
    <div class="col-md-2">
        <img style="height:68px;width: 100%" src="../../resources/index/img/logo.png" alt=""/>
    </div>
    <!-- 代码 开始 -->
    <div id="menu2" class="menu col-md-7">
        <ul>
            <li><a  href="../index/index.html">首 页</a ></li>
            <li><a href="../scenicSpotIntroduction/scenicSpotIntroduction.html">特色景点</a></li>
            <li><a href="../gourmetHotel/gourmetHotel.html">住宿餐饮</a></li>
            <li><a href="../tourRoute/tourRoute.html">旅游导览</a></li>
            <li><a href="../backstory/backstory.html">背景故事</a></li>
            <li><a href="../aboutUs/aboutUs.html">关于我们</a></li>
            <li><a href="../travel-note/travel-note.html">游记</a></li>
        </ul>
        <div class="cls"></div>
    </div>
    <!-- 代码 结束 -->


    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">
        <div id="weather" onmouseover="weatherView()" onmouseout="weatherViewRemove()" style="z-index: 100;position: absolute">

            地点：<span id="currentCity"></span>
            当前日期：<span id="date"></span><br/>
            天气：
            <span id="today_weather" class="weahter"></span>
            <img id="today_day" src=""/>
            <img id="today_night" src=""/>
            <div class="nextDay">
                明天：
                <span id="tomorrow_date"></span><br/>
                <img id="tomorrow_day" src=""/>
                <img id="tomorrow_night" src=""/>
                <span id="tomorrow_weather" class="weahter"></span>
                <span id="tomorrow_temperature" class="weahter"></span>
            </div>
            <div class="nextDay">
                后天：
                <span id="tomorrowAfter_date"></span><br/>
                <img id="tomorrowAfter_day" src=""/>
                <img id="tomorrowAfter_night" src=""/>
                <span id="tomorrowAfter_weather" class="weahter"></span>
                <span id="tomorrowAfter_temperature" class="weahter"></span>
            </div>
        </div>
    </div>
</div>
<!--头像-->
<div id="user" class="col-md-10 col-md-offset-1 col-xs-12" style="display: none">
    <a class="user_page_view" href=""><img id="user_avt" class="img-circle col-md-2 col-xs-4" style="height: 60px;width: 90px" src="../../resources/travel-note/img/avt.jpg"></a>
    <br/>
    <a class="user_page_view" href=""><span id="user_email" class="glyphicon glyphicon-user col-xs-8" style="color: rgb(73, 75, 73); font-size: 21px;"></span></a>

</div>

<!--游记攻略欣赏-->
<!-- 代码 开始 -->

<div class="container">
    <div class="col-md-12 col-xs-12 col-lg-12" style="text-align: center;background: #fff6f4">
        <h2>游记欣赏</h2>
    </div>
    <div class="grid col-md-12 col-xs-12 col-lg-12">
        <figure id="img-wide1" class="effect-chico col-md-8 col-xs-12  col-lg-8">
            <img class="" style="width: 100%" src="../../resources/travel-note/img/1.jpg" alt="img01"/>
            <figcaption>
                <h2 class="travel_title_like">这是标题</h2>
                <p>

                    <span class="travel_like_like glyphicon glyphicon-thumbs-up" style="color: rgb(4, 5, 3);font-size: 15px;"> 55次</span>
                    <span class="travel_view_like glyphicon glyphicon-eye-open" style="color: rgb(12, 12, 12); font-size: 15px;"> 98次</span>
                    <span class="travel_time_like glyphicon glyphicon-time" style="color: rgb(17, 17, 17); font-size: 15px;"> 2016-4-25</span>
                    <span class="travel_email_like glyphicon glyphicon-user" style="color: rgb(14, 14, 14); font-size: 15px;"> 158412147@qq.com</span>
                </p>
                <a class="travel_content_like" href="#" target="_blank">View more</a>
            </figcaption>
        </figure>
        <figure class="effect-chico col-md-4">
            <img src="../../resources/travel-note/img/2.jpg" alt="img02"/>
            <figcaption class="col-md-12">
                <h2 class="travel_title_like">这是标题</h2>
                <p>

                    <span class="travel_like_like glyphicon glyphicon-thumbs-up" style="color: rgb(4, 5, 3);font-size: 15px;"> 55次</span>
                    <span class="travel_view_like glyphicon glyphicon-eye-open" style="color: rgb(12, 12, 12); font-size: 15px;"> 98次</span>
                    <span class="travel_time_like glyphicon glyphicon-time" style="color: rgb(17, 17, 17); font-size: 15px;"> 2016-4-25</span>
                    <span class="travel_email_like glyphicon glyphicon-user" style="color: rgb(14, 14, 14); font-size: 15px;"> 158412147@qq.com</span>
                </p>
                <a class="travel_content_like" href="#" target="_blank">View more</a>
            </figcaption>
        </figure>

        <figure class="effect-chico col-md-4">
            <img src="../../resources/travel-note/img/3.jpg" alt="img08"/>
            <figcaption>
                <h2 class="travel_title_like">这是标题</h2>
                <p>

                    <span class="travel_like_like glyphicon glyphicon-thumbs-up" style="color: rgb(4, 5, 3);font-size: 15px;"> 55次</span>
                    <span class="travel_view_like glyphicon glyphicon-eye-open" style="color: rgb(12, 12, 12); font-size: 15px;"> 98次</span>
                    <span class="travel_time_like glyphicon glyphicon-time" style="color: rgb(17, 17, 17); font-size: 15px;"> 2016-4-25</span>
                    <span class="travel_email_like glyphicon glyphicon-user" style="color: rgb(14, 14, 14); font-size: 15px;"> 158412147@qq.com</span>
                </p>
                <a class="travel_content_like" href="#" target="_blank">View more</a>
            </figcaption>
        </figure>
        <figure class="effect-chico col-md-8" id="img-wide2">
            <img src="../../resources/travel-note/img/4.jpg" alt="img09"/>
            <figcaption>
                <h2 class="travel_title_like">这是标题</h2>
                <p>

                    <span class="travel_like_like glyphicon glyphicon-thumbs-up" style="color: rgb(4, 5, 3);font-size: 15px;"> 55次</span>
                    <span class="travel_view_like glyphicon glyphicon-eye-open" style="color: rgb(12, 12, 12); font-size: 15px;"> 98次</span>
                    <span class="travel_time_like glyphicon glyphicon-time" style="color: rgb(17, 17, 17); font-size: 15px;"> 2016-4-25</span>
                    <span class="travel_email_like glyphicon glyphicon-user" style="color: rgb(14, 14, 14); font-size: 15px;"> 158412147@qq.com</span>
                </p>
                <a class="travel_content_like" href="#" target="_blank">View more</a>
            </figcaption>
        </figure>

    </div>


    <!--攻略-->
    <div class="col-md-12 col-xs-12 col-lg-12" style="text-align: center;background: #fff6f4">
        <h2>攻略欣赏</h2>
    </div>

    <div class="grid col-md-12 col-xs-12">
        <figure id="img-wide3" class="effect-chico col-md-8 col-xs-12 ">
            <img style="width: 100%" src="../../resources/travel-note/img/5.jpg" alt="img01"/>
            <figcaption>
                <h2 class="strategy_title_like">这是标题</h2>
                <p>

                    <span class="strategy_like_like glyphicon glyphicon-thumbs-up" style="color: rgb(4, 5, 3);font-size: 15px;"> 55次</span>
                    <span class="strategy_view_like glyphicon glyphicon-eye-open" style="color: rgb(12, 12, 12); font-size: 15px;"> 98次</span>
                    <span class="strategy_time_like glyphicon glyphicon-time" style="color: rgb(17, 17, 17); font-size: 15px;"> 2016-4-25</span>
                    <span class="strategy_email_like glyphicon glyphicon-user" style="color: rgb(14, 14, 14); font-size: 15px;"> 158412147@qq.com</span>
                </p>
                <a class="strategy_content_like" href="#" target="_blank">View more</a>
            </figcaption>
        </figure>
        <figure class="effect-chico col-md-4">
            <img src="../../resources/travel-note/img/6.jpg" alt="img02"/>
            <figcaption class="col-md-12">
                <h2 class="strategy_title_like">这是标题</h2>
                <p>

                    <span class="strategy_like_like glyphicon glyphicon-thumbs-up" style="color: rgb(4, 5, 3);font-size: 15px;"> 55次</span>
                    <span class="strategy_view_like glyphicon glyphicon-eye-open" style="color: rgb(12, 12, 12); font-size: 15px;"> 98次</span>
                    <span class="strategy_time_like glyphicon glyphicon-time" style="color: rgb(17, 17, 17); font-size: 15px;"> 2016-4-25</span>
                    <span class="strategy_email_like glyphicon glyphicon-user" style="color: rgb(14, 14, 14); font-size: 15px;"> 158412147@qq.com</span>
                </p>
                <a class="strategy_content_like" href="#" target="_blank">View more</a>
            </figcaption>
        </figure>

        <figure class="effect-chico col-md-4">
            <img src="../../resources/travel-note/img/7.jpg" alt="img08"/>
            <figcaption>
                <h2 class="strategy_title_like">这是标题</h2>
                <p>

                    <span class="strategy_like_like glyphicon glyphicon-thumbs-up" style="color: rgb(4, 5, 3);font-size: 15px;"> 55次</span>
                    <span class="strategy_view_like glyphicon glyphicon-eye-open" style="color: rgb(12, 12, 12); font-size: 15px;"> 98次</span>
                    <span class="strategy_time_like glyphicon glyphicon-time" style="color: rgb(17, 17, 17); font-size: 15px;"> 2016-4-25</span>
                    <span class="strategy_email_like glyphicon glyphicon-user" style="color: rgb(14, 14, 14); font-size: 15px;"> 158412147@qq.com</span>
                </p>
                <a class="strategy_content_like" href="#" target="_blank">View more</a>
            </figcaption>
        </figure>
        <figure class="effect-chico col-md-8" id="img-wide4">
            <img src="../../resources/travel-note/img/8.jpg" alt="img09"/>
            <figcaption>
                <h2 class="strategy_title_like">这是标题</h2>
                <p>

                    <span class="strategy_like_like glyphicon glyphicon-thumbs-up" style="color: rgb(4, 5, 3);font-size: 15px;"> 55次</span>
                    <span class="strategy_view_like glyphicon glyphicon-eye-open" style="color: rgb(12, 12, 12); font-size: 15px;"> 98次</span>
                    <span class="strategy_time_like glyphicon glyphicon-time" style="color: rgb(17, 17, 17); font-size: 15px;"> 2016-4-25</span>
                    <span class="strategy_email_like glyphicon glyphicon-user" style="color: rgb(14, 14, 14); font-size: 15px;"> 158412147@qq.com</span>
                </p>
                <a class="strategy_content_like" href="#" target="_blank">View more</a>
            </figcaption>
        </figure>

    </div>
</div>
<!-- 代码 结束 -->


<!--推荐游记/标题-->
<div class="col-md-12 col-xs-12 review">

    <div class="col-md-6 col-xs-12">
        <h2 class="col-md-12" style="text-align: center">推荐游记</h2>
        <ul id="travel_recommendation" class="li-style">

        </ul>
    </div>
    <div class="col-md-6 col-xs-12 review">
        <h2 class="col-md-12" style="text-align: center">推荐攻略</h2>
        <ul id="strategy_recommendation" class="li-style">

        </ul>
    </div>

</div>

<div class="circle" style="position:absolute;top:0px;right:-20px;z-index: 100;">
    <div class="ring">
        <a href="../index/login.html" class="menuItem fa  fa-2x">
            <span class="glyphicon glyphicon-log-in" style="color: rgb(255, 140, 60);"> 登陆</span>
        </a>
        <a href="../index/signup.html" class="menuItem fa  fa-2x">
            <span class="glyphicon glyphicon-plus" style="color: rgb(255, 140, 60);"> 注册</span>
        </a>

    </div>
    <a href="#" class="center fa fa-th fa-2x"></a>
</div>
<div class="col-md-12" style="text-align: center;height: 80px;font-size: 18px;background: pink">
    <div style="margin-top: 30px">
        <span>&copy;四川旅游学院信息与工程学院2017-2018&nbsp;|&nbsp; 地址：四川省成都市龙泉驿区红岭路459号&nbsp; | &nbsp;邮编：610100 </span>

    </div>

</div>
<script>

</script>
<script>
    var items = document.querySelectorAll('.menuItem');

    for(var i = 0, l = items.length; i < l; i++) {
        items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

        items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
    }

    document.querySelector('.center').onclick = function(e) {
        e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
    };



</script>
</body>
</html>